<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>申诉中</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .order-tab .van-tabs__nav{
            padding: 0 0 !important;
        }
        .order-tab .van-tab{
            width: 20%;
            padding: 0px 0px!important;
        }
        .order-tab .van-ellipsis{
            font-size: 12px;
        }
        .order-tab .van-tabs--line .van-tabs__wrap{
            width: 100%;
        }

        .tap_active:after {
            content: '';
            position: absolute;
            left: 36%;
            top: auto;
            bottom: 0;
            right: auto;
            height: 3px;
            width: 23%;
            border-radius: 8px;
            background-color: #172E71;
        }
        .menu-top-tap {
            height: 44px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            width: 100%;
            display: flex;
        }
        .menu-top-tap .tap-item {
            /*float:left;*/
            text-align: center;
            margin: 0 auto;
            flex: 1;
            display: inline-block;
            height: 44px;
            line-height: 40px;
            position: relative;
            color: #333;
        }
        .menu-top-tap .tap_active {
            color: #333;
            font-weight: bold;
        }
    </style>
</head>

<body style="background: #f7f4f2;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">申诉中</span>
</div>
<div id="app" style="padding-top: 55px;"  v-cloak>
    <div class="QHR-order">
        <div class="order-tab">
            <div class="menu-top-tap menu-appeal-title">
                <div class="tap-item" :class="{tap_active:state == 1}" v-myclick="[1, changestate]">我的申诉</div>
                <div class="tap-item" :class="{tap_active:state == 2}" v-myclick="[2, changestate]">被申诉</div>
            </div>
            <div class="change-order" >
                <ul v-show="state==1">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for="(list, index) in purchase_con" :key="index">
                        <div class="stats-head">
                            <div style="display: flex;align-items: center">
                                <div class="stats-head-zi">{{list.identityType== 1 ? hide_name_two(list.sellNickname) : hide_name_two(list.buyNickname)}}</div>
                                <div class="stats-head-name">{{list.identityType== 1 ? hide_name(list.sellNickname) : hide_name(list.buyNickname)}}</div>
                                <div class="buyer" :class="{'appeal_status' : purchase_con.identityType== 2}">
                                  买家 {{list.identityType== 1 ? '买家' : '卖家'}}
                                </div>
                            </div>
                            <div class="stats-order-time">{{list.orderTradeTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{list.tradePrice}}QHR</span></div>
                            <div style="margin-bottom: 15px">总价&nbsp;<span style="color: #333">{{list.totalPrice}}QHR</span></div>
                            <div>已冻结&nbsp;<span style="color: #333">{{list.tradeNum}} QHR</span></div>
                        </div>
                        <div class="order-info-watch">
                            <div class="order-info-details" v-open-win="{id:list.id}" vurl="myappeal">查看详情</div>
                        </div>
                    </li>
                </ul>
                <ul class="pending-payment" v-show="state==2">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for="(list, index) in cover_con" :key="index">
                        <div class="stats-head">
                            <div style="display: flex;align-items: center">
                                <div class="stats-head-zi">{{list.identityType== 1 ? hide_name_two(list.sellNickname) : hide_name_two(list.buyNickname)}}</div>
                                <div class="stats-head-name">{{list.identityType== 1 ? hide_name(list.sellNickname) : hide_name(list.buyNickname)}}</div>
                                <div class="buyer" :class="{'appeal_status' : purchase_con.identityType== 2}">
                                   {{list.identityType== 1 ? '买家' : '卖家'}}
                                </div>
                            </div>
                            <div class="stats-order-time">{{list.orderTradeTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{list.tradePrice}} CNY</span></div>
                            <div style="margin-bottom: 15px">预付总额&nbsp;<span style="color: #333">{{list.totalPrice}} CNY</span></div>
                            <div>已冻结&nbsp;<span style="color: #333">{{list.tradeNum}} QHR</span></div>
                        </div>
                        <div class="pending-payment-details">
                            <div class="pending-payment-details-tiem"></div>
                            <div class="order-info-details" v-open-win="{id:list.id}" vurl="cover_appeal">查看详情</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        purchase_con,
        purchase_list,
        cover_list,
        cover_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
          "agtVer":1,
          "clientVer":1,
          "ctime":201911071802959,
          "cctime":201911071802959,
          "sign":"abcdefg",
          "token":getPrefs('token'),
          "pageNumber":1,
          "pageSize":10,
        }
        var base = new Base64();
        var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
            var base = new Base64();
            var purchase_list = base.decode(ret.content.jsonData);
            purchase_list =JSON.parse( purchase_list);
            // content_list=JSON.parse(data_list);
            purchase_con = purchase_list.aList;
            console.log(JSON.stringify(purchase_con));
            initApp();
        }
        pinet.post(APIURLP+'/play/al/getActiveData',data, callback);
        api.parseTapmode();

    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                active: 2,
                state:1,
                purchase_con:purchase_con,
                purchase_list:purchase_list,
                cover_list:cover_list,
                cover_con:cover_con,
            },
            computed: {
            },
            methods: {
              hide_name_two:function(name){
                return new Array(name.length).join('') + name.substr(-1);
              },
              hide_name:function(name){
                return new Array(name.length).join('*') + name.substr(-1);
              },
              changestate:function (state) {
                  this.state = state;
                  if(state == 1){
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                        var base = new Base64();
                        var purchase_list = base.decode(ret.content.jsonData);
                        vm.purchase_list =JSON.parse( purchase_list);
                        // content_list=JSON.parse(data_list);
                        vm.purchase_con = vm.purchase_list.aList;
                        console.log(JSON.stringify(vm.purchase_con));

                    }
                    pinet.post(APIURLP+'/play/al/getActiveData',data, callback);
                  }
                  if(state == 2){
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                        var base = new Base64();
                        var cover_list = base.decode(ret.content.jsonData);
                        vm.cover_list =JSON.parse( cover_list);
                        // content_list=JSON.parse(data_list);
                        vm.cover_con = vm.cover_list.aList;
                        console.log(JSON.stringify(vm.cover_list));

                    }
                    pinet.post(APIURLP+'/play/al/getPassiveData',data, callback);
                  }
              },
            },
            watch: {

            },
        })
    }

</script>

</html>
